<template>
	<view>
		<view class="item" style="padding: 20rpx;">
			<u-form class="item" style="padding: 0 20rpx 110rpx;" :model="feebackInfo" ref="uform" label-width="auto">

				<u-form-item label="维修结束时间" borderBottom @click="pickerShow(1)">
					<u-input v-model="feebackInfo.repairEndDate" disabled
						disabledColor="#ffffff" border="none" inputAlign="right" placeholder="请选择" type="select"
						:select-open="actionSheetShow">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="是否已结算" borderBottom @click="pickerShow(2)">
					<u-input v-model="feebackInfo.costSettlementShow" disabled
						disabledColor="#ffffff" border="none" inputAlign="right" placeholder="请选择" type="select"
						:select-open="actionSheetShow">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="维修反馈意见">
					<u-input v-model="feebackInfo.repairFeedback" border="none" inputAlign="right" placeholder="请输入反馈意见"
						type="textarea">
					</u-input>
				</u-form-item>

			</u-form>
		</view>
		<!-- 维修结束时间 -->
		<u-datetime-picker :show="finishTimeShow" mode="date" @cancel="finishTimeShow=false" @confirm="pickerConfim()">
		</u-datetime-picker>
		<!-- 是否提供备用车 -->
		<u-picker :show="settlementShow" :columns="isSettlementList" keyName="value" @confirm="pickerConfim"
			@cancel="settlementShow=false"></u-picker>


		<u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm"
			content="确定提交？" @cancel="showModal=false">
			<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
			<!-- <view class="warp" style="margin: 30rpx;" v-if="contentSlot">
				<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;"
					mode="widthFix"></image>
			</view> -->
			<!-- #endif -->
		</u-modal>

		<view class="button-container">
			<button class="btn-item" @click="commit">提 交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				feebackInfo: {
					id: '',
					repairEndDate: '',
					costSettlement: '',
					costSettlementShow: '',
					repairFeedback: ''
				},


				isSettlementList: [[{
						value: '未结算',
						code: 1
					},
					{
						value: '已结算',
						code: 2
					}
				]],
				mode: '',
				type: 0,
				finishTimeShow: false,
				settlementShow: false,
				showModal: false
			}
		},
		onLoad(options) {
			this.feebackInfo.id = options.repairId;
		},

		methods: {
			pickerShow(type) {
				this.type = type;
				switch (type) {
					case 1: //维修开始时间
						this.finishTimeShow = true;
						this.mode = 'date';
						break
					case 2:
						this.settlementShow = true;
						this.mode = 'selector';
						break
				}
			},
			pickerConfim(e) {
				if (this.mode == 'date') {
					let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
					if (this.type == 1) { //维修结束时间
						this.finishTimeShow = false;

						this.feebackInfo.repairEndDate = timeStr;
					}
				} else if (this.mode == 'selector') {
					if (this.type == 2) { //是否已结算
						this.settlementShow = false;

						let obj = e.value[0];
						this.feebackInfo.costSettlement = obj.code;
						this.feebackInfo.costSettlementShow = obj.value;
					}
				}
			},

			commit() {
				// this.showModal = true;
				uni.showModal({
				    content: '确定提交吗?',
				    success(result) {
				       if (result.confirm) {

							this.$u.api.repairFeedback(this.feebackInfo).then(
								res => {
									this.$u.toast('提交成功');
									
									setTimeout(()=>{
										uni.navigateBack()
									}, 1000)
								}
							);				

				       }
				    }
				})
			},

			confirm() {
				this.$u.api.repairFeedback(this.feebackInfo).then(
					res => {
						this.$u.toast('提交成功');
						
						setTimeout(()=>{
							uni.navigateBack()
						}, 1000)
					}
				);
			}


		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
